<script setup lang='ts'>
import { loginAPI } from '@/apis'; // 引入登录API函数
import { useUserStore } from '@/stores'; // 引入用户状态管理
import type { FormType } from '@/types'; // 引入表单类型定义
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'; // 引入Element Plus的组件和类型
import { ref } from 'vue'; // 引入Vue的响应式API
import { useRouter } from 'vue-router'; // 引入Vue Router的路由实例

// 定义登录表单的初始数据
const loginForm = ref<FormType>({
  mobile: '13355667788', // 手机号
  code: '246810', // 验证码
  agree: false // 是否同意用户协议和隐私条款
});

// 定义表单实例的引用
const formRef = ref<FormInstance>();

// 定义表单验证规则
const rules = ref<FormRules<FormType>>({
  mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' }, // 必填且格式正确
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' } // 格式验证
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' }, // 必填
    { len: 6, message: '验证码应为6位', trigger: 'blur' } // 长度验证
  ],
  agree: [
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请同意用户协议和隐私条款')); // 验证是否同意协议
        } else {
          callback(); // 验证通过
        }
      }, trigger: 'change' // 触发验证的事件
    }
  ]
});

// 定义token的响应式变量
const token = ref('');

// 获取路由实例
const router = useRouter();

// 从用户状态管理中解构出redirectUrl和setPiniaToken方法
const { redirectUrl, setPiniaToken } = useUserStore();

// 定义登录方法
const login = () => {
  formRef.value?.validate(async res => {
    if (res) { // 表单验证通过
      try {
        const res = await loginAPI(loginForm.value); // 调用登录API
        // 本地存储token
        token.value = res.data.token;
        localStorage.setItem('vue3-geek-token', token.value);
        // 使用Pinia存储token
        setPiniaToken(res.data.token);
        ElMessage.success('登录成功'); // 显示登录成功的消息提示
        router.push(redirectUrl ? redirectUrl : '/'); // 跳转到重定向URL或首页
      } catch (error) {
        console.log('登录错误', error); // 捕获并打印登录错误
      }
    }
  });
};
</script>

<template>
  <div class="container">
    <el-card>
      <el-image class="logo" src="/src/assets/images/logo.png" /> <!-- 显示logo -->

      <!-- 登录表单 -->
      <el-form :model="loginForm" :rules="rules" ref="formRef">
        <!-- 手机号输入框 -->
        <el-form-item prop="mobile">
          <el-input placeholder="请输入手机号" v-model="loginForm.mobile" />
        </el-form-item>
        <!-- 验证码输入框 -->
        <el-form-item prop="code">
          <el-input placeholder="请输入验证码" v-model="loginForm.code" />
        </el-form-item>
        <!-- 同意协议的复选框 -->
        <el-form-item prop="agree">
          <el-checkbox v-model="loginForm.agree">
            我已阅读并同意「用户协议」和「隐私条款」
          </el-checkbox>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("@/assets/images/login.png");
  /* 设置背景图片 */
}

.el-card {
  width: 410px;
  height: 320px;
  margin: auto;
  margin-top: 150px;
  /* 设置卡片的位置 */
}

.logo {
  width: 200px;
  display: block;
  margin: 0 auto 20px;
  /* 设置logo的样式 */
}

.el-form {
  padding: 0 25px;
  /* 设置表单的内边距 */
}

.el-button {
  width: 100%;
  /* 设置按钮的宽度 */
}
</style>